<template>
  <div v-for="(item,index) in payMentList" ::key="index" class="payment-methods-list-li flex middle between">
    <div class="payment-methods-list-li-left flex middle">
      <van-image round width="40px" height="40px" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
      <div class="addApay-card-num flex middle">
        <div class="addApay-card-num-box flex middle">
          <div class="addApay-card-num-doc"></div>
          <div class="addApay-card-num-doc"></div>
          <div class="addApay-card-num-doc"></div>
          <div class="addApay-card-num-doc"></div>
        </div>
        <div class="addApay-card-num-box flex middle">
          <div class="addApay-card-num-doc"></div>
          <div class="addApay-card-num-doc"></div>
          <div class="addApay-card-num-doc"></div>
          <div class="addApay-card-num-doc"></div>
        </div>
        <div class="addApay-card-num-box flex middle">
          <div class="addApay-card-num-text">5</div>
          <div class="addApay-card-num-text">6</div>
          <div class="addApay-card-num-text">7</div>
          <div class="addApay-card-num-text">8</div>
        </div>
      </div>
    </div>
    <div class="payment-methods-list-li-right">移除</div>
  </div>
</template>
  
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
defineProps({
  payMentList: {
    type: Array,
    default: []
  },
});
const emit = defineEmits()
const footerBtn = () => {
  emit('footerBtn');
}
</script>
  
<style scoped lang="scss">
.payment-methods-list-li {
  height: 36px;
  border-radius: 6px;
  background-color: #F7F7F7;
  padding: 0 8px;
  margin-bottom:8px;
  .addApay-card-num {
    margin-left: 6px;

    &-doc {
      width: 3px;
      height: 3px;
      background-color: #000;
      border-radius: 50%;
      margin-right: 3px;
    }

    &-text {
      font-size: 8px;
      font-weight: 500;

    }

    &-box {
      margin-right: 4px;
    }
  }

  &-right {
    font-size: 7px;
    font-weight: 600;
    color: #1642F4;

  }
}
</style>
  